<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        /* .box {
            width:200px;
            height:200px;
            background: #000;
        } */
        body {
            position: relative;
        }
        .box{
            position: relative;
        }
        .com {
            /* display: inline-block; */
            position: absolute;
            width: 120px;
            height: 36px;
            line-height: 36px;
            text-align: center;
            /* margin:2px 2px 0 0; */
            color: #fff;
            opacity: 0;
            transition: 1s;
        }

        #btn {
            display:block;
            width: 120px;
            height: 36px;
            line-height: 36px;
            text-align: center;
            text-decoration:none;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
            border-radius: 6px;
            background: green;
            color: #fff;
            margin: 20px auto;
        }
    </style>
</head>

<body>

    <a href="javascript:;" id="btn">倒过来的</a>
    <div class="box"></div>
    <script>

        /**
        *   1*1    j*i
            1*2 2*2
            1*3 2*3 3*3

        **/
        // for (var i = 1; i < 5; i++) {
        //    for( var j = 1; j <=i ; j++) {
        //       console.log(j +'*'+ i + '='+ i*j);
        //    }
        //    console.log('i:',i);
        // }

        var str = '';
        var len = 10;
        var box = document.querySelector('.box');
        var btn = document.querySelector('#btn');
        var colorArr = ['#78cc64', '#58cd7e', '#4fcdad', '#4cc7dd', '#469ee8', '#465de8', '#5846e8'];
        var timer = null;
        var isLoad = true;
        var onOff = true;

        /***
            倒过来的九九乘法表
        ***/
        //  for (var i = len - 1; i > 0; i--) {
        //    for( var j = 1; j < len ; j++ ) {
        //        if( j >i ) continue;
        //        var txt =j +'*'+ i + '='+ i*j;
        //        console.log(txt);
        //        str += '<div class="com" style="background:'+colorArr[ i%colorArr.length ]+'; top:'+38*(j-1)+'px;rihgt:'+122*(i-1)+'px;">'+txt+'</div>';
        //    }
        //    //str += '<br />';
        // }
        /**反过来的**/
        function reverseFn() {
            for (var i = len - 1; i > 0; i--) {
                for (var j = 1; j < len; j++) {
                    if (j > i) continue;
                    var txt = j + '*' + i + '=' + i * j;
                    str += '<div class="com" style="background:' + colorArr[i % colorArr.length] + '; top:' + 38 * i  + 'px;right:' + 122 * (j - 1) + 'px;">' + txt + '</div>';
                }
                //str += '<br />';
            }

            return str;
        }
        function poFn() {
            for (var i = 1; i < len; i++) {
                for (var j = 1; j < len; j++) {
                    if (j > i) continue;
                    var txt = j + '*' + i + '=' + i * j;
                    str += '<div class="com" style="background:' + colorArr[i % colorArr.length] + '; top:' + 38 * (i) + 'px;left:' + 122 * (j - 1) + 'px;">' + txt + '</div>';
                }
                //str += '<br />';
            }
            return str;
        }

        // for (var i = 1; i < len; i ++ ) {
        //    for( var j = 1; j < len ; j++ ) {
        //        if( j >i ) continue;
        //        var txt =j +'*'+ i + '='+ i*j;
        //        var div = document.createElement('div');
        //        div.innerHTML = txt;
        //        div.className = 'com';
        //        div.style.cssText = 'background:'+colorArr[ i%colorArr.length ]+'; top:'+38*(i-1)+'px;left:'+122*(j-1)+'px; transition:0.5s opacity '+j+'s;opacity:1;' ;
        //        ///str += '<div class="com" style="background:'+colorArr[ i%colorArr.length ]+'; top:'+38*(i-1)+'px;left:'+122*(j-1)+'px; transition:0.5s opacity '+j+'s;opacity:1;">'+txt+'</div>';
        //       document.body.appendChild(div);
        //    }
        //    //str += '<br />';
        // }

        box.innerHTML = poFn();
        var comDiv = document.getElementsByClassName('com');
        var start = 0;
        var num = comDiv.length;
        /*
         定时器setInterval 的使用 
        timer = setInterval( function(){
            if( start >= num ) {
                start = comDiv.length -1;
                clearInterval(timer);
            }
            comDiv[start].style.opacity = 1;
            start ++;
            console.log(start);
        },100);*/

        autoShow();
        function autoShow() {
            f = arguments.callee;
            if ( start < num && isLoad ) {
                timer = setTimeout(function () {
                    start++;
                    if( start >= num ) {
                        isLoad = false;
                        timer = null;
                    }
                    comDiv[start - 1].style.opacity = 1;
                    f();
                   
                }, 100);
            }
        };

        /****点击事件***/
        btn.onclick = function () {
            /*** isLoad 是解锁开关  当运动完之后才可以点击下一个运动**/
            clearTimeout(timer);
            start = 0;
            str = '';
            
            if( !isLoad ) {
                if( onOff ) {
                    box.innerHTML = reverseFn();
                    this.innerHTML = '正面过来';
                }else{
                    box.innerHTML =  poFn();
                    this.innerHTML = '倒过来的';
                }
                isLoad = true; //进来的开关
                onOff = !onOff ;
            }
            autoShow();
        }

        // var myNum = 0;
        // var myTimer = null;
        // (function f(){
        //     //var f = arguments.callee;
        //    if( myNum < 10) {
        //         myTimer = setTimeout(function(){
        //             myNum ++;
        //             //console.log( myNum );
        //             //arguments.callee();
        //             f();
        //             console.log(arguments);
        //             //f();
        //         });
        //    } 
        // })()
    </script>
</body>

</html>